horizontal tab menu

I want to create a tab menu - horizontal with all the tabs left justified
except for the last one which I want right justified.

|------------| |----------| |---------| |---------|
|---------|
|------------|--|----------|--|---------|--|---------|----------------------
----|---------|

I think the above hives you the idea

cheers

fj

Jul 20 '05 #1

Subscribe Post Reply

10455

Neal

On Wed, 7 Apr 2004 22:37:32 -0700, fj <fj@mailmefor.inf> wrote:

I want to create a tab menu - horizontal with all the tabs left justified
except for the last one which I want right justified.

|------------| |----------| |---------| |---------|
|---------|
|------------|--|----------|--|---------|--|---------|----------------------
----|---------|

I think the above hives you the idea

cheers

fj

I'm not sure I have what you want in mind. But if you set all the tabs to
float: left; and the last one to float: right;, AND there's sufficient
viewport width, all the tabs will line up L to R and the last one will be
far right.

Jul 20 '05 #2

Cheers
Thanks for that, and thats what i thought but I have not managed to achieve
that yet - any chance of an example?
fj
"Neal" <ne*****@spamrcn.com> wrote in message
news:op**************@news.rcn.com...

On Wed, 7 Apr 2004 22:37:32 -0700, fj <fj@mailmefor.inf> wrote:
I want to create a tab menu - horizontal with all the tabs left justified except for the last one which I want right justified.

|------------| |----------| |---------| |---------|
|---------|
|------------|--|----------|--|---------|--|---------|---------------------- ----|---------|

I think the above hives you the idea

cheers

fj

I'm not sure I have what you want in mind. But if you set all the tabs to
float: left; and the last one to float: right;, AND there's sufficient
viewport width, all the tabs will line up L to R and the last one will be
far right.

Jul 20 '05 #3

kiran

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body{
font: 12px verdana;
}

span{
background: #e5e5e5;
padding: 3px 10px;
border: 1px solid #000000;

position: relative;
top: 2px;
}

..left{
float: left;
padding: 5px 1px;
}

..right{
float: right;
padding: 5px 1px;
}

..spacer {
clear: both;
}

..tabContent{
padding: 10px;
border: 1px solid black;
height: 200px;
}

</style>
</head>

<body>

<div class=tabContainer>
<div class=left>
<span>Tab1</span>
<span>Tab2</span>
<span>Tab3</span>
</div>
<div class=right><span>Tab Right</span></div>
<div class="spacer"></div>
</div>
<div class=tabContent>
tab content
</div>

</body>
</html>

For explanation read http://www.realworldstyle.com/split.html

Dont miss dtd declaration, may not work properly is some browsers if
it is left out.

Regards
Kiran Makam

Jul 20 '05 #4

many thanks

fj

"kiran" <ki*******@yahoo.com> wrote in message
news:7c**************************@posting.google.c om...

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body{
font: 12px verdana;
}

span{
background: #e5e5e5;
padding: 3px 10px;
border: 1px solid #000000;

position: relative;
top: 2px;
}

.left{
float: left;
padding: 5px 1px;
}

.right{
float: right;
padding: 5px 1px;
}

.spacer {
clear: both;
}

.tabContent{
padding: 10px;
border: 1px solid black;
height: 200px;
}

</style>
</head>

<body>

<div class=tabContainer>
<div class=left>
<span>Tab1</span>
<span>Tab2</span>
<span>Tab3</span>
</div>
<div class=right><span>Tab Right</span></div>
<div class="spacer"></div>
</div>
<div class=tabContent>
tab content
</div>

</body>
</html>

For explanation read http://www.realworldstyle.com/split.html

Dont miss dtd declaration, may not work properly is some browsers if
it is left out.

Regards
Kiran Makam

Jul 20 '05 #5

many thanks

fj

"kiran" <ki*******@yahoo.com> wrote in message
news:7c**************************@posting.google.c om...

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
body{
font: 12px verdana;
}

span{
background: #e5e5e5;
padding: 3px 10px;
border: 1px solid #000000;

position: relative;
top: 2px;
}

.left{
float: left;
padding: 5px 1px;
}

.right{
float: right;
padding: 5px 1px;
}

.spacer {
clear: both;
}

.tabContent{
padding: 10px;
border: 1px solid black;
height: 200px;
}

</style>
</head>

<body>

<div class=tabContainer>
<div class=left>
<span>Tab1</span>
<span>Tab2</span>
<span>Tab3</span>
</div>
<div class=right><span>Tab Right</span></div>
<div class="spacer"></div>
</div>
<div class=tabContent>
tab content
</div>

</body>
</html>

For explanation read http://www.realworldstyle.com/split.html

Dont miss dtd declaration, may not work properly is some browsers if
it is left out.

Regards
Kiran Makam

Jul 20 '05 #6

by: elad | last post by:

Hi The Menu doesn't work properly when I have 2 frame and the Menu popup frame=document target frame, when I choose item in the menu the doc opened and the menu get stuck. Here is the code...

Javascript

Rendering of horizontal menu

by: Ansgar Hein | last post by:

I have been playing around with several different versions for a horizontal menu, but I haven't been able to build a horizontal navigation based on the vertical one featured on www.alistapart.com...

HTML / CSS

horizontal row div menu

by: theo | last post by:

Hi, I'm working on a horizontal row menu, to use like folder tabs. Does anyone know what the CSS style "cursor" is supposed to produce? Any working samples? I put it in the code, but can't see...

HTML / CSS

Centered equal-width horizontal nav list CHALLENGE

by: Chris Beall | last post by:

Objective: Using an HTML list, create a horizontal nav menu with these characteristics: - All menu items have the same width at all times. - When the window width is reduced, the menu items...

HTML / CSS

fully horizontal menu

by: Sergio E. | last post by:

Hi group, I write this post with the following question: How can I to build an absolutely horizontal menu?, This is because I can't find how can I configure the menu component of asp.net 2.0...

ASP.NET

horizontal dropdown menu using html and css

by: camphor | last post by:

hi, I have a single column webpage with a horizontal dropdown menu and am trying to make the nav bar fit across the page, the column is 800px, it looks ok in dreamweaver 8 but when I test it in...

HTML / CSS

Can I have a vertical sub-menu in a horizontal type CFMenu?

by: Haitashi | last post by:

Hello everyone: I have a CFMenu with the type set to horizontal. I'd like to have the sub-menu items open vertically. Is that possible? Here is my code. I want the Portals sub-menu (Portal A,...

ColdFusion

Problem with CSS Horizontal Dropdown Menu

by: Jim | last post by:

Hi, I have two questions/problems pertaining to CSS horizontal dropdown menus and am hoping that someone here can help me out. (1) I'm having a problem centering the menu. I picked up the...

HTML / CSS

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Similar topics